// @ts-nocheck
import React, { useEffect, useState } from "react";
import { NavBar } from "antd-mobile";
import { RightOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import "./index.less";
import List1 from "@/images/user/jl.png";
import List2 from "@/images/user/hf.png";
import List3 from "@/images/user/hy.png";
import List4 from "@/images/user/hd.png";
import List5 from "@/images/user/pj.png";
type serviceListType = {
	id: number;
	name: string;
	url: string;
	img: any;
};
const Trends: React.FC<any> = () => {
	const navigate = useNavigate();

	const [list, _] = useState<serviceListType[]>([
		{
			id: 1,
			name: "上报历史",
			img: List1,
			url: "/user/trends/history",
		},
		{
			id: 2,
			name: "社区回复",
			img: List2,
			url: "/user/trends/communityReply",
		},
		// {
		// 	id: 3,
		// 	name: "议事历史",
		// 	img: List3,
		// 	url: "/user/trends",
		// },
		{
			id: 4,
			name: "我的活动",
			img: List4,
			url: "/user/trends/myEvents",
		},
		{
			id: 5,
			name: "待我评价",
			img: List5,
			url: "/user/trends/evaluate",
		},
	]);

	return (
		<div className="trends-contarnier">
			<div className="header">
				<div>
					<NavBar onBack={() => navigate("/user")}>
						<div className="commontitle">我的动态</div>
					</NavBar>
				</div>
			</div>
			<div className="trends-box">
				<div className="trends-box-list">
					{list.map((item) => (
						<div
							className="trends-box-list-item"
							key={item.id}
							onClick={() => navigate(item.url)}>
							<img
								src={item.img}
								alt=""
							/>
							<div>
								<div>{item.name}</div>
								<div>
									<RightOutline style={{ fontSize: 16, color: "#D0D6E8" }} />
								</div>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default Trends;
